import { Component } from 'react';
import {  Modal ,List} from 'antd';
import axios from 'axios';
import {Breadcrumb} from 'antd';
import FooterPage from '@/components/layout/footerPage';

class Researchplatform extends Component {

  constructor(props) {
    super(props);
    this.state = { 
      equinfo: [],
      isModalOpen: false,
      selectedDevice: null
    };
    this.bodystyle = {
      height: '1200px',
    }
  }
  handleDeviceClick = (device) => {
    this.setState({
      selectedDevice: device,
      isModalOpen: true
    });
  }

  handleOk = () => {
    this.setState({
      isModalOpen: false,
    });
  };

  handleCancel = () => {
    this.setState({
      isModalOpen: false,
    });
  };
  componentDidMount() {
  const handleError = (error) => {
      console.error(error);
  };
  const handleException = (exception) => {
      console.error(exception);
  };

  axios.get('http://localhost:8080/web/lab_platform/list', {})
  .then((response) => {
  console.log(response);
  this.setState({ equinfo: response.data.data });
  })
  .catch(handleError)
  .catch(handleException);
}
  render() {
    const {equinfo} =this.state
    return (
      <>
      <div>


        <div className={'researchplatform'}>
          <div className={'top-04'}>
            <p id="">大型仪器设备</p>
            <div className='position'>
              <Breadcrumb
                style={{float :"right"}}
                items={[
                  {title: '首页'},
                  { title: <a href="Overview.jsx">科研平台</a>},
                ]}
                />                
            </div>
          </div>
          <div className={'conment'}>
            <List
              itemLayout="vertical"
              size="small"
              pagination={{
                pageSize: 4,
              }}
              dataSource={equinfo}
              renderItem={(equ) => (
                <List.Item
                  key={equ.name}
                  extra={
                    <img
                      style={{width:"250px", height:"180px"}}
                      alt="logo"
                      src={`data:image/png;base64,${equ.image}`}
                    />
                  }
                >
                <List.Item.Meta
                  title={<a type="primary" onClick={() => this.handleDeviceClick(equ)}>{equ.name}</a>}
                />
                  <a className='equtext'onClick={() => this.handleDeviceClick(equ)}>
                    {equ.text}
                  </a>
                    <Modal
                      visible={this.state.isModalOpen}
                      onOk={this.handleOk}
                      onCancel={this.handleCancel}
                      width={1400}
                      bodyStyle={this.bodystyle}
                    >
                      <p className='equ-name'>{this.state.selectedDevice ? this.state.selectedDevice.name : ""}</p>
                      <p className='equ-text'>{this.state.selectedDevice ? this.state.selectedDevice.text : ""}</p>
                      <img
                      style={{width:"450px", height:"300px"}}
                      alt="logo"
                      src={`data:image/png;base64,${equ.image}`}
                      
                    />
                    </Modal>
                </List.Item>
              )}
            />
          </div>
          </div>
          <FooterPage />
          </div>
      </>
    );
  }
}


export default Researchplatform;